<template>
  <!--选择卡券-->
  <u-dialog title="优惠券选择器" :show.sync="show" width="1300px" :auto-close="false" :append-to-body="true" :footer="false" @cancel="cancel" @confirm="confirm">
    <!-- 条件筛选 -->
    <u-filtered>
      <el-form :inline="true" :model="listQuery" class="search-form">
        <el-form-item label="优惠券分组" prop="group">
          <group v-model="listQuery.groupId" width="160px" />
        </el-form-item>
        <el-form-item label="有效期起始时间范围" prop="beginValidityDate">
          <u-date-time-picker v-model="listQuery.beginValidityDate" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDate" />
        </el-form-item>
        <el-form-item label="优惠券名称" prop="name">
          <el-input v-model="listQuery.name" placeholder="请输入优惠券名称" clearable style="width: 170px" />
        </el-form-item>
        <el-form-item label="模板ID" prop="templateId">
          <el-input v-model="listQuery.templateId" placeholder="请输入模板ID" style="width: 130px" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="hdlFilter">查询</el-button>
        </el-form-item>
      </el-form>
    </u-filtered>

    <!-- 列表显示 -->
    <u-table
      :data="list"
      :loading="listLoading"
      :options="listOptions"
      :columns="columns"
      :pagination.sync="listQuery"
      :fetch="hdlList"
      @selection-change="hdlSelectChange"
    >
      <template v-slot:right>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="{ row }">
            <el-button v-if="isSelect(row)" @click="add(row)">选择</el-button>
            <el-button v-else type="primary" @click="sub(row)">已选</el-button>
          </template>
        </el-table-column>
      </template>
    </u-table>
  </u-dialog>

</template>

<script>
/**
 * 业务组件 - 优惠券选择器
 */
import group from './group'
export default {
  name: 'Coupon',
  components: {
    group
  },
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 是否多选 */
    multiple: {
      type: Boolean,
      default: true
    },
    /** 是否显示有效优惠券 */
    valid: {
      type: Boolean,
      default: false
    },
    /** 选中的数据列表 */
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      api: this.$u.api.MarketCouponData,
      // 表格
      columns: [
        {
          prop: 'group',
          label: '分组',
          formatter: (row, column) => {
            const { group } = row
            if (group) {
              return group.groupName
            }
          }
        },
        {
          prop: 'name',
          label: '名称',
          width: '200'
        },
        {
          prop: 'validityDate',
          label: '有效期日期',
          width: '180',
          render: (h, params) => {
            let { beginDate, endDate } = params.row
            if (!beginDate) {
              beginDate = '不限制'
            }
            if (!endDate) {
              endDate = '不限制'
            }
            return [
              h('el-tag', { props: { effect: 'plain' }}, '起始:' + beginDate),
              h('br'),
              h('el-tag', { props: { effect: 'plain' }}, '终止:' + endDate)
            ]
          }
        },
        {
          prop: 'templateId',
          label: '模板ID',
          width: '80'
        },
        {
          prop: 'stock',
          label: '发放总量',
          width: '100',
          formatter: (row) => {
            if (row.ifNumLimit) {
              return row.stock
            } else {
              return '不限制'
            }
          }
        },
        {
          prop: 'total',
          label: '已领取',
          width: '100'
        },
        {
          prop: 'surplus',
          label: '剩余数量',
          width: '100',
          formatter: (row) => {
            if (row.ifNumLimit) {
              return row.surplus
            } else {
              return '不限制'
            }
          }
        },
        {
          prop: 'createdAt',
          label: '创建时间',
          timestamp: true,
          width: '140'
        },
        {
          prop: 'status',
          label: '状态',
          render: (h, params) => {
            const { status, status_text } = params.row
            let type = 'success'
            switch (status) {
              case 0:
                type = 'warning'
                break
              case 1:
                type = 'success'
                break
              case 2:
                type = 'danger'
                break
              case 3:
                type = 'danger'
                break
            }

            return h('el-tag', { props: { type: type }}, status_text)
          }
        },
        {
          prop: 'remark',
          label: '备注',
          width: '200'
        }
      ],
      // 查询分页数据
      listQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 1,
        beginValidityDate: [],
        name: '',
        templateId: '',
        remark: '',
        creatDate: '',
        disabled: '1',
        groupId: '',
        beginDate1: '',
        beginDate2: '',
        valid: this.valid
      },
      list: [],
      // 加载数据加载状态
      listLoading: false,
      listOptions: {
        mutiSelect: false,
        stripe: true
      },
      // 打开弹窗状态
      dialogFormVisible: false,
      // 创建更新数据源
      dataForm: {},
      // 选中数据源
      selectData: [],
      // 开关设置查询不需要分页列表数据
      listState: false
    }
  },
  methods: {
    // 是否选中
    isSelect(row) {
      return this.$u.test.empty(this.data.filter(d => d.id === row.id)[0])
    },
    // 选中事件
    add(row) {
      if (!this.multiple) {
        if (this.data.length > 0) {
          this.$u.msg('限制一张优惠券', 'error')
          return
        }
      }
      if (row.num) {
        row.num = 1
      }
      this.data.push(row)

      if (this.multiple) {
        this.$emit('change', this.data)
      } else {
        const arr = this.data.slice(0, 1)
        this.$emit('change', arr)
      }
    },
    // 取消选中事件
    sub(row) {
      this.data.splice(this.data.findIndex(item => item.id === row.id), 1)
      if (this.multiple) {
        this.$emit('change', this.data)
      } else {
        const arr = this.data.slice(0, 1)
        this.$emit('change', arr)
      }
    },
    // 确认
    confirm() {
      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    },
    changeDate(item) {
      if (item) {
        this.listQuery.beginDate1 = item[0]
        this.listQuery.beginDate2 = item[1]
      } else {
        this.listQuery.beginDate1 = ''
        this.listQuery.beginDate2 = ''
      }
    }
  }
}
</script>
